<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>装途网招商</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/main.css" />



</head>

<body><h1>0351-6695395</h1>
<img class="arr" src="">
<section class="firsection">
	<img src="images/logo.png" class="logo">
    <ul class="ulload"><li style="width:0%;"></li></ul>
</section>

<section id="scene1" class="scene">
    <img src="images/blank.png" data-src="images/talk1.png" >
    <img src="images/blank.png" data-src="images/talk2.png" data-time="3000" >
    <img src="images/blank.png" data-src="images/talk3.png" data-time="4000">
    <img src="images/blank.png" data-src="images/talk4.png" data-time="4000">
    <img src="images/blank.png" data-src="images/talk5.png" data-time="3500">
    <img src="images/blank.png" data-src="images/talk6.png" data-time="3000">
    <img src="images/blank.png" data-src="images/person1.png">
</section>
<section id="scene2" class="scene">
    <img src="images/blank.png" data-src="images/talk7.png" data-time="6000">
    <img src="images/blank.png" data-src="images/talk8.png" data-time="4000">
    <img src="images/blank.png" data-src="images/talk9.png" data-time="7000">
    <img src="images/blank.png" data-src="images/talk11.png" data-time="3500">
    <img src="images/blank.png" data-src="images/talk10.png" data-time="3500">
    <img src="images/blank.png" class="person" data-src="images/person3.png" >
    <img src="images/blank.png" class="person" data-src="images/person2.png" >
</section>

<section id="scene3" class="scene">
    <img src="images/blank.png" data-src="images/text1.png" data-time="3000">
    <img src="images/blank.png" data-src="images/text2.png" data-time="3000">
    <img src="images/blank.png" data-src="images/text3.png" data-time="3000">
    <img src="images/blank.png" data-src="images/text4.png" data-time="3000">
    <img src="images/blank.png" data-src="images/phone.png" data-time="3000">

</section>

<script src="js/jquery.js"></script>
<script>

</script>

<script language="JavaScript">

	var imgs1=document.querySelector("#scene1").querySelectorAll("img");
	var imgs2=document.querySelector("#scene2").querySelectorAll("img");
	var imgs3=document.querySelector("#scene3").querySelectorAll("img");
	var len;var len1; var num=1; var person=0; var talk=2; var text=13; var time;
	var mousemove=0;
	addimage(imgs1,scene1,len1,num);
	function addimage(imgs,scene,len1,num){
		len=len1=imgs.length;
		for(i=0;i<len;i++){
			//console.log(imgs[i]["src"]+"!"+len);
			imgs[i].src= imgs[i].getAttribute("data-src");
			imgs[i].onload= function(){
				len1--;	
				if(len1==0){
					switch(num){
						case 1:
						  scene1();
						  var ulload=(len-len1)*100/len;
						  document.querySelector(".ulload").querySelector("li").style.width=ulload+'%';
						  break;
						case 2:
						  scene2();
						  break;
						case 3:
						  
						  break;
						}
					}						
				}
			}
		}
	function scene1(){
		document.querySelector("#scene1").style.display="block";
		document.querySelectorAll("section")[0].style.display="none";
		showimg1(0);
		showimg1(6);
		document.querySelector(".arr").style.display="block";
		mousemove=0;
		addimage(imgs2,scene2,len1,3);
		var a1 = new LSwiperMaker({
			bind:document.getElementById("scene1"),  // 绑定的DOM对象
			dire_h:false,     //true 判断左右， false 判断上下
			backfn:function(o){    //回调事件
				if(o.dire=='U') mousemove++;
					if(mousemove<6){console.log(mousemove);
						showimg1(mousemove);
						}
					if(mousemove==6){
						scene2();
						}
				}
			})
		}
	function scene2(){
		document.querySelector("#scene2").style.display="block";
		document.querySelectorAll("section")[1].style.display="none";
		showimg2(0);
		showimg2(5);
		addimage(imgs3,scene3,len1,3);
		mousemove=0;
		var a2 = new LSwiperMaker({
			bind:document.getElementById("scene2"),  // 绑定的DOM对象
			dire_h:false,     //true 判断左右， false 判断上下
			number:2,
			backfn:function(o){    //回调事件
				if(o.dire=='U') mousemove++;
					if(mousemove<5){
						if(mousemove==2){
							imgs1[5].style.display="none";
							imgs1[6].style.display="block";
							} 
						if(mousemove==3){
							imgs1[6].style.display="none";
							imgs1[5].style.display="block";
							} 
						showimg2(mousemove);
						}
					if(mousemove==5){
						scene3();
						}
				}
			})
		}
	function scene3(){
		document.querySelector("#scene3").style.display="block";
		document.querySelector("#scene2").style.display="none";
		showimg3(0);
		mousemove=0;
		}
	function scene3img(a){
		if(a){
			if(mousemove<3){
				mousemove++;
				imgs3[mousemove].className = 'on';	
				imgs3[mousemove-1].className = 'on onup';
				if(mousemove==3){
				document.querySelector("h1").className ='showtel'
				document.querySelector(".arr").style.display="none";
				imgs3[4].className = 'phone';
				}
				}
			}
		else{
			if(mousemove>0){
				if(mousemove<3){
				mousemove--;
			    imgs3[mousemove].className = 'on';
				imgs3[mousemove+1].className = '';}
				if(mousemove==2){
				imgs3[4].className = '';
				}
				}
			}
		}
	
	function showimg2(n){
		    if(n!=0)
			imgs2[n-1].style.display="none";
			imgs2[n].style.display="block";		
		}
	function showimg1(n){
		    if(n!=0)
			imgs1[n-1].style.display="none";
			imgs1[n].style.display="block";		
		}
	function showimg3(n){
		    for(i=0;i<5;i++)
			imgs3[i].className = '';
			imgs3[n].className = 'on';	
			if(n==3)	imgs3[4].className = 'on';
		}
	</script>
    <script>
 
    (function (){

        var LSwiperMaker = function(o){ 
 
            var that = this;
            this.config = o;
            this.control = false;
            this.sPos = {};
            this.mPos = {};
            this.dire;
     
            // this.config.bind.addEventListener('touchstart', function(){ return that.start(); } ,false);
            // 这样不对的，event对象只在事件发生的过程中才有效;
            this.config.bind.addEventListener('touchstart', function(e){ return that.start(e); } ,false);
            this.config.bind.addEventListener('touchmove', function(e){ return that.move(e); } ,false);
            this.config.bind.addEventListener('touchend', function(e){ return that.end(e); } ,false);
 
        }
 
        LSwiperMaker.prototype.start = function(e){
             
             var point = e.touches ? e.touches[0] : e;
             this.sPos.x = point.screenX;
             this.sPos.y = point.screenY;
 
        }
        LSwiperMaker.prototype.move = function(e){  
 
            var point = e.touches ? e.touches[0] : e;
            this.control = true;
            this.mPos.x = point.screenX;
            this.mPos.y = point.screenY;
 
        }
 
        LSwiperMaker.prototype.end = function(e){
 

            this.config.dire_h  && (!this.control ? this.dire = null : this.mPos.x > this.sPos.x ? this.dire = 'R' : this.dire = 'L')
            this.config.dire_h  || (!this.control ? this.dire = null : this.mPos.y > this.sPos.y ? this.dire = 'D' : this.dire = 'U')

			
			
			this.control = false;
            this.config.backfn(this);
 
        }
 
        window.LSwiperMaker = LSwiperMaker;
        document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);// 禁止微信touchmove冲突
 
    }())
 
    var a = new LSwiperMaker({
            bind:document.getElementById("scene3"),  // 绑定的DOM对象
            dire_h:false,     //true 判断左右， false 判断上下
               //回调事件
			backfn:function(o){    //回调事件
			
			console.log(o.dire=='U');
			scene3img(o.dire=='U');
			}
	
    })
 
    </script>

</body>
</html>
